<template>
  <div class="content-style">
    <div v-html="content"></div>
  </div>
</template>
<script>
  import Blazy from 'vux-blazy'
  export default {
    props: {
      contentHtml: String,
      containerId: String
    },
    created () {

    },
    mounted () {
      this.format(this.contentHtml)
    },
    watch: {
      contentHtml (val) {
        console.log('watch goods content length:', val.length)
        if (val) {
          this.format(val)
        }
      }
    },
    data () {
      return {
        content: ''
      }
    },
    computed: {},
    methods: {
      format (val) {
        const content = document.createElement('div')
        content.innerHTML = val
        const imgs = content.querySelectorAll('img')

        imgs.forEach((el) => {
          el.removeAttribute('height')
          el.removeAttribute('width')
          el.setAttribute('data-src', el.getAttribute('src'))
          el.classList.add('lazy')

          el.setAttribute('src', '')
          el.style.width = '100%'
        })

        this.content = content.innerHTML

        new Blazy({
          selector: '.lazy',
          container: `#${this.containerId}`,
          offset: 667,
          success (ele) {
          }
        })
      }
    },
    components: {}
  }
</script>
<style>
  .content-style {
    padding: 5px;
    /*background: #fff;*/
  }

  .content-style img {
    display: block;
    max-width: 100% !important;
  }
</style>
